<template>
  <div class='sub-category'>
    <div class="container">
      <!-- 面包屑 -->
      <SubBread :subCate='subCate'></SubBread>
      <!-- 筛选区 -->
      <SubFilter :subCate='subCate' @filter-change='hFilterChange'/>
      <!-- 排序组件 -->
      <SubSort @sort-change="hSortChange"/>
      <!-- 商品列表 -->
      <div class="sort-list-container">
      <GoodsItem  v-for="good in goodList" :key="good.id" :good="good"/>
      </div>
      <XtxInfinteLoading
            :isLoading="isLoading"
            :isFinished="isFinished"
            @load="loadDate"/>
    </div>
  </div>
</template>

<script>

import SubBread from './components/sub-bread.vue'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import GoodsItem from '@/views/Category/components/goods-item.vue'
import { useSubCate, useLoadDate } from './serve/sub.js'
export default {
  name: 'SubCategory',
  components: { SubBread, SubFilter, SubSort, GoodsItem },
  setup () {
    const { subCate } = useSubCate()

    const { isFinished, isLoading, loadDate, goodList, hFilterChange, hSortChange } = useLoadDate()
    return { subCate, goodList, hFilterChange, hSortChange, loadDate, isLoading, isFinished }
  }

}
</script>
<style scoped lang='less'>
.sort-list-container {
      display: flex;
      flex-wrap: wrap;
   }
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
